import React, {Component}      from 'react';
import {StyleSheet, View}      from 'react-native';
import MenuItem                from '../views/MenuItem';


export default class MenuView extends Component {

    render() {
        let {menuInfos} = this.props
        return (
            <View style={styles.container}>
                {menuInfos.map((info) => (
                    <MenuItem
                        key={info.title}
                        icon={info.icon}
                        title={info.title}
                        onPress={() => this.props.onMenuSelected(info)}
                    />
                ))}
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection:'row',
        // flexWrap:'wrap',
        height:0.56*206,
        alignItems:'center',
        backgroundColor:'white',
        justifyContent: 'space-between'
    },
});
